import { message, Spin } from "antd";
import React, {
    useEffect,
    useCallback,
    useLayoutEffect,
    useState,
    useMemo
} from "react";
import { connect, useDispatch } from "react-redux";
import axiosMethod from "../../../../util/axios";
import { LgDrawer, LgPaginationA } from "lancoo-web-ui";
import "./index.scss";
import TableList from "../../../../common/component/fileList";
import Scrollbars from "react-custom-scrollbars";

const columns = [
    // {
    //     key: "index",
    //     width: "8%",
    //     textAlign: "center",
    //     textColor: "#999"
    // },
    {
        key: "backupTime",
        width: "25%",
        textAlign: "center",
        textColor: "#999",
        name: "备份时间"
    },
    {
        key: "backupLogotypeName",
        width: "10%",
        textAlign: "left",
        name: "备份方式"
    },
    {
        key: "backupFilePath",
        width: "50%",
        textAlign: "left",
        padding: "0 30px",
        name: "备份文件路径"
    },
    {
        key: "operate_group",
        width: "15%",
        textAlign: "left",
        padding: "0 0 0 20px",
        name: "操作"
    }
]
const pageNum = 11;

function OperateSystem(props){
    let {
        userInfo,
        backupsHistoryInfo
    } = props;
    const dispatch = useDispatch();
    const [loadVisible, setLoadVisible] = useState(false);
    const [moduleList, setModuleList] = useState([]);
    const [total, setTotal] = useState(0);
    const [pageIndex, setPageIndex] = useState(1);

    const getHistory = useCallback((data)=>{
        setLoadVisible(true);
        axiosMethod({
            type: "get",
            url: "api/backupRestore/backup/recorde/bySys/info",
            noCheck: true,
            body: {
                eduId: userInfo.eduId,
                sysId: data.sysId,
                pageSize: 100,
            },
            callback: function(res, info){
                setLoadVisible(false);
                if(!res || info.code !== "200"){
                    return;
                }
                setModuleList(res);
                setTotal(res.length);
            }
        });
    }, [userInfo]);

    const closeDrawer = useCallback(() => {
        dispatch({
            type: "SET_BACKUPSHISTORYINFO",
            data: {
                visible: false,
                data: {}
            }
        })
    }, [dispatch]);

    const reduction = useCallback((data)=>{
        dispatch({
            type: "SET_ALERTINFO",
            data: {
                visible: true,
                title: "确定将系统数据还原到该版本吗？",
                smallTitle: "还原后系统数据将会重置为指定版本，请谨慎操作",
                onOk: function(){
                    window._changeLoad(true);
                    axiosMethod({
                        type: "post",
                        url: `api/backupRestore/restore/single`,
                        body: {
                            id: data.id,
                            sysId: data.sysId,
                            schoolId: userInfo.schoolId,
                            userId: userInfo.userId,
                            schoolLevel: userInfo.schoolLevel
                        },
                        header: {
                            "Content-type": "multipart/form-data"
                        },
                        timeout: 6000000,
                        callback: function(res, info){
                            window._changeLoad(false);
                            if(info.code === "200"){
                                message.success("还原成功");
                                dispatch({
                                    type: "SET_ALERTINFO",
                                    data: {
                                        visible: false,
                                        title: "",
                                        smallTitle: "",
                                        data: {},
                                        onOk: ()=>{},
                                        onCancel: ()=>{}
                                    }
                                })
                            }
                        }
                    });
                    
                },
                onCancel: function(){
                    dispatch({
                        type: "SET_ALERTINFO",
                        data: {
                            visible: false,
                            title: "",
                            smallTitle: "",
                            data: {},
                            onOk: ()=>{},
                            onCancel: ()=>{}
                        }
                    })
                }
            }
        })
    }, [userInfo, dispatch]);

    const deleteMethod = useCallback((data)=>{
        dispatch({
            type: "SET_ALERTINFO",
            data: {
                visible: true,
                title: "确定删除该条历史记录吗？",
                smallTitle: "",
                onOk: function(){
                    axiosMethod({
                        type: "delete",
                        url: `api/backupRestore/backup/recorde/delete/${data.id}`,
                        body: {},
                        callback: function(res, info){
                            if(info.code === "200"){
                                message.success("删除成功");
                                getHistory(backupsHistoryInfo.data);
                                dispatch({
                                    type: "SET_ALERTINFO",
                                    data: {
                                        visible: false,
                                        title: "",
                                        smallTitle: "",
                                        data: {},
                                        onOk: ()=>{},
                                        onCancel: ()=>{}
                                    }
                                })
                            }
                        }
                    });
                    
                },
                onCancel: function(){
                    dispatch({
                        type: "SET_ALERTINFO",
                        data: {
                            visible: false,
                            title: "",
                            smallTitle: "",
                            data: {},
                            onOk: ()=>{},
                            onCancel: ()=>{}
                        }
                    })
                }
            }
        })
    }, [backupsHistoryInfo, getHistory, dispatch]);

    const updateModuleList = useMemo(()=>{
        let list = JSON.parse(JSON.stringify(moduleList));
        list.forEach((item, index)=>{
            item.backupLogotypeName = <span style={{color:item.backupLogotype === "1"?"#ff6600":""}}>{item.backupLogotype === "1"?"主动备份": item.backupLogotype === "2"? "自动备份": "/"}</span>
            item.operate_group = (
                <div className="table-btn-group" key={index}>
                    <span className="blue-btn" onClick={()=>reduction(item)}>还原</span>
                    <span className="btn-slice"></span>
                    <span className="red-btn" onClick={()=>deleteMethod(item)}>删除</span>
                </div>
            )
        })
        return list;
    }, [moduleList, reduction, deleteMethod]);

    useLayoutEffect(() => {
        if(!backupsHistoryInfo?.data?.sysId){
            setModuleList([]);
            setTotal(0);
            return;
        } else {
            getHistory(backupsHistoryInfo.data);
        }
    }, [backupsHistoryInfo, getHistory])
    return (
        <LgDrawer
            type={"right"}
            className="system-detail-drawer"
            visible={backupsHistoryInfo.visible}
            width={850}
            title={<span>历史记录<span style={{color: "#666", fontWeight: "normal"}}> - {backupsHistoryInfo?.data?.sysName||""}</span></span>}
            closeBtn={closeDrawer}
            showBottomView={false}>
            <Scrollbars>
            <Spin spinning={loadVisible} tip="加载中...">
            <div className="drawer-container">
                <div className="app-child-info">
                    <span className="list-num">共<span>{moduleList.length}</span>条记录</span>
                </div>
                <TableList
                tableHeader={columns}
                pageIndex={1}
                pageSize={moduleList.length}
                // getList={changeCount}
                scrollbar={false}
                data={updateModuleList}
                ></TableList>
                {
                    total > pageNum?
                    <div className="menu_pagination">
                        <LgPaginationA
                        total={Math.ceil(total/pageNum)}
                        size="normal"
                        currentPage={pageIndex}
                        onChangePage={(value)=>{
                            setPageIndex(value);
                        }}
                        errorPage={() => {}}
                        ></LgPaginationA>
                    </div>:
                    ""
                }
            </div>
            </Spin>
            </Scrollbars>
        </LgDrawer>
    )
}
const mapToProps = (state) => {
    return {
        sysAddrInfo: state.sysAddrInfo,
        userInfo: state.userInfo,
        appKindList: state.appKindList,
        backupsHistoryInfo: state.backupsHistoryInfo
    }
}
export default connect(mapToProps)(OperateSystem);